import React, { Component } from 'react'
import Breadcrumb from '../../base/Breadcrumb'
import { withRouter } from 'react-router-dom'
import { Button, Input, Radio, Message } from 'element-react'
import Select from '../../base/Select'
import DatePicker from '../../base/DatePicker'
class SkuPrice extends Component {
  constructor(props) {
    super(props)
    this.state = {
      "endTime": "2018-03-13T02:27:21.880Z",
      "price": 0,
      "priceTypeId": 0,
      "startTime": "2018-03-13T02:27:21.880Z",
      "status": 0,
      // sku id
      commodityId: parseInt(sessionStorage.skuId),
      id: this.props.match.params.id || '',
      name: sessionStorage.skuName,
      btnSwitch: true,
      breadcrumb: [],
      priceOptions: [
        {
          label: '****',
          value: '1'
        },
        {
          label: '****',
          value: '2'
        }
      ]
    }
    this.tempPriceTypeName = ''
  }
  componentDidMount() {
    if (this.state.id !== '') {
      let data = JSON.parse(sessionStorage.skuPriceItem)
      console.log(data)
      let {price, endTime, startTime} = data
      this.tempPriceTypeName = data.name
      this.setState({
        price, endTime, startTime
      })
    }
    this.selectPriceType()
    if (this.props.match.url.match(/skuPriceSee/g)) {
      this.setState({
        btnSwitch: false,
        breadcrumb: ['sku管理', 'sku价格', '查看']
      })
    } else if (this.props.match.url.match(/skuPriceEdit/g)) {
      this.setState({
        breadcrumb: ['sku管理', 'sku价格', '编辑']
      })
    } else {
      this.setState({
        breadcrumb: ['sku管理', 'sku价格', '新增']
      })
    }
  }
  selectPriceType () {
    this.$ajax.selectPriceType().then(res => {
      if (res.code === 200) {
        this.state.priceOptions = res.data.map(a => {
          a.label = a.name
          a.value = a.id
          return a
        })
        this.setState({priceOptions: this.state.priceOptions}, () => {
          this.state.priceOptions.map(a => {
            if (a.name === this.tempPriceTypeName) {
              this.setState({
                priceTypeId: a.id
              })
            }
          })
        })
      }
    })
  }
  // 选择价格类型
  selectWay (value) {
    console.log(value)
    this.setState({priceTypeId: value})
  }
  // 获取时间
  getTime (start, end) {
    this.setState({
      startTime: new Date(start),
      endTime: new Date(end)
    })
  }
  // 提交
  submit () {
    let {commodityId, name, price, priceTypeId, startTime, endTime, status, id} = this.state
    let data = {commodityId, id, name, price, priceTypeId, startTime, endTime, status}
    console.log(data)
    // 新增
    if (this.state.id === '') {
      this.$ajax.addSkuPrice(data).then(res => {
        if (res.code === 200) {
          Message({
            message: '提交成功',
            type: 'success'
          })
          this.props.history.push({
            pathname: `/skuPrice/${this.state.commodityId}`,
            state: { fromDashboard: true }
          })
        } else {
          Message.error(res.msg)
        }
      }).catch(() => {
        Message.error('网络错误')
      })
    } else {
      this.$ajax.editSkuPrice(data).then(res => {
        if (res.code === 200) {
          Message({
            message: '修改成功',
            type: 'success'
          })
        } else {
          Message.error('操作失败')
        }
      }).catch(() => {
        Message.error('网络错误')
      })
    }
  }
  cancel () {
    this.props.history.push({
      pathname: '/skuPrice',
      state: { fromDashboard: true }
    })
  }
  getDatePicker () {
    if (this.props.match.url.match(/skuPriceCreate/g)) {
      return <DatePicker getTime={this.getTime.bind(this)}/>
    } else if (this.props.match.url.match(/skuPriceEdit/g)) {
      return <DatePicker getTime={this.getTime.bind(this)}
                         setValue={true}
                         startTime={this.state.startTime}
                         endTime={this.state.endTime}/>
    } else {
      return (
        <DatePicker getTime={this.getTime.bind(this)}
                    setValue={true}
                    startTime={this.state.startTime}
                    endTime={this.state.endTime}/>
      )
    }
  }
  showBtn () {
    if (this.state.btnSwitch) {
      return (
        <div className="btn-group discount-btn-group">
          <Button type="success" size="large" onClick={this.submit.bind(this)}>提交</Button>
          <Button type="warning" size="large" onClick={this.cancel.bind(this)}>取消</Button>
        </div>
      )
    }
  }
  render() {
    return (
      <div className="skuPrice">
        <Breadcrumb data={this.state.breadcrumb}/>
        <div className="height40"></div>
        <div className="inputGroup flexCenterY">
          <label className="inputLabel">sku名称：</label>
          <Input placeholder="请输入sku名称" className="inputSmall" size="large" onChange={value => {this.setState({name: value})}} value={this.state.name}/>
        </div>
        <div className="inputGroup flexCenterY">
          <label className="inputLabel">价格类型：</label>
          <Select options={this.state.priceOptions} select={this.selectWay.bind(this)} value={this.state.priceTypeId}/>
          {/*<Input placeholder="请输入价格类型" className="inputSmall" size="large" onChange={value => {this.setState({priceTypeId: value})}}/>*/}
        </div>
        <div className="inputGroup flexCenterY">
          <label className="inputLabel">价格值：</label>
          <Input placeholder="请输入价格值" className="inputSmall" size="large" onChange={value => {this.setState({price: value})}} value={this.state.price}/>
        </div>
        <div className="inputGroupList">
          <label className="inputLabelList" style={{width: '160px'}}>有效时间：</label>
          {this.getDatePicker.call(this)}
        </div>
        {/* 优惠券状态 */}
        <div className="inputGroup">
          <label className="inputLabel">状态：</label>
          <Radio.Group value={this.state.status} onChange={(status) => {this.setState({status})}}>
            <Radio value="1">已上架</Radio>
            <Radio value="0">未上架</Radio>
          </Radio.Group>
        </div>
        <div className="height20"></div>
        {this.showBtn()}

      </div>
    );
  }
}

export default withRouter(SkuPrice)